<template>
  <div class="container1">
    <div class="content">
      <div class="left">
        <div class="top">
          <fire-alarm-display :newInfo="newInfo" />
        </div>
        <div class="middle">
          <numeric-keypad />
        </div>
        <div class="bottom">
          <function-keypad1 />
        </div>
      </div>
      <div class="right">
        <div class="top">
          <FireAlarmIndicators :buttons="indicators" />
        </div>
        <div class="bottom">
          <function-keypad2 @click="handleButtonClick" :buttons="buttons" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FireAlarmDisplay from "./FireAlarmDisplay.vue";
import NumericKeypad from "./NumericKeypad.vue";
import FunctionKeypad1 from "./FunctionKeypad1.vue";
import FunctionKeypad2 from "./FunctionKeypad2.vue";
import FireAlarmIndicators from "./FireAlarmIndicators.vue";

import { reqKeyCommandSend } from "@api/api.js";
export default {
  components: {
    FireAlarmDisplay,
    NumericKeypad,
    FunctionKeypad1,
    FunctionKeypad2,
    FireAlarmIndicators,
  },
  props: {
    basicCommands: {
      type: Array,
      default: () => [],
    },
    statusInfo: {
      type: Object,
      default: () => ({}),
    },
    newInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      indicators: [
        {
          label: "火警",
          name: "fireAlarm",
          active: "",
          activeClassPrefix: "active-circle-red",
        },
        {
          label: "故障",
          name: "isMalfunction",
          active: "",
          activeClassPrefix: "active-circle-yellow",
        },
        {
          label: "启动",
          name: "bootUp",
          active: "",
          activeClassPrefix: "active-circle-primary",
        },
        {
          label: "系统故障",
          name: "sysFault",
          active: "",
          activeClassPrefix: "active-circle-yellow",
        },
        {
          label: "反馈",
          name: "feedback",
          active: "",
          activeClassPrefix: "active-circle-primary",
        },
        { label: "声光故障", name: "lightSoundFaultaaa", active: "" },
        {
          label: "自检指示",
          name: "selfCheckaaa",
          active: "",
          activeClassPrefix: "active-circle-yellow",
        },
        {
          label: "主电工作",
          name: "mainCircuitWorked",
          active: "",
          activeClassPrefix: "active-circle-green",
        },

        {
          label: "联动延时",
          name: "linkageDelayaaa",
          active: "",
          activeClassPrefix: "active-circle-primary",
        },
        {
          label: "备电工作",
          name: "backupCircuitWorked",
          active: "",
          activeClassPrefix: "active-circle-green",
        },
      ],
      buttons: [
        { label: "复位", color: "orange", disabled: true },
        { label: "总线手控", color: "white", disabled: true },
        { label: "自检", color: "white", disabled: true },
        { label: "自动/手动", color: "white", disabled: true },
        { label: "屏幕", color: "white", disabled: true },
        { label: "声光控制", color: "white", disabled: true },
        { label: "消音", color: "yellow", disabled: true },
        { label: "切换", color: "white", disabled: true },
      ],
      isAuto: false,
    };
  },
  watch: {
    basicCommands: {
      handler(newVal) {
        // console.log("newVal:", newVal);

        // 创建一个 buttons 的副本，避免直接修改原数组
        const updatedButtons = [...this.buttons];

        newVal.forEach((item) => {
          switch (item.keyName) {
            case "复位":
              updatedButtons[0] = {
                label: "复位",
                color: "orange",
                disabled: false,
                ...item, // 合并原按钮属性和新的 item 属性
              };
              break;

            case "消音":
              updatedButtons[6] = {
                label: "消音",
                color: "yellow",
                disabled: false,
                ...item,
              };
              break;

            case "自动":
            case "手动":
              // 仅在 isAuto 与 keyName 匹配时更新按钮
              if (
                (item.keyName === "自动" && !this.isAuto) ||
                (item.keyName === "手动" && this.isAuto)
              ) {
                updatedButtons[3] = {
                  label: "自动/手动",
                  color: "white",
                  disabled: false,
                  ...item,
                };
              }
              break;
          }
        });

        // 更新 buttons 数组
        this.buttons = updatedButtons;
        // console.log("this.buttons", this.buttons);
      },
      deep: true,
      immediate: true, // 初始化时立即执行一次
    },
    statusInfo: {
      handler(val) {
        // console.log("val", val);
        if (!val) return; // 空值检查

        // 遍历 indicators，直接赋值 statusInfo 中的值到 active
        this.indicators = this.indicators.map((indicator) => {
          // 检查 statusInfo 中是否有与 indicator.name 完全匹配的字段
          if (indicator.name in val) {
            return {
              ...indicator,
              active: val[indicator.name], // 直接赋值，不转换类型
            };
          }
          return indicator; // 无匹配字段时保持原状态
        });

        this.isAuto = val.manualOperate == 1;
        this.basicCommands = [...this.basicCommands];
      },
      deep: true,
      immediate: true, // 初始化时立即执行
    },
  },
  methods: {
    async handleButtonClick(info) {
      if (!info.data.id) return this.$modal.notifyWarning("暂不支持下发此指令");
      this.$emit("onCommand", info.data);
    },
  },
};
</script>

<style lang="less" scoped>
.container1 {
  min-width: 480px;
  height: 100%;
  text-align: center;
  background-color: #4d4946;
  border-radius: 15px;
  padding: 20px;
  color: white;
  .content {
    display: flex;
    justify-content: space-between;
    height: 100%;
    .left {
      flex: 1;
      height: 100%;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        height: 32%;
      }
      .middle {
        height: 32%;
      }
      .bottom {
        height: 32%;
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 6px;
      //   background-color: #4d4946;
      //   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      .top {
        width: 100%;
        height: 49%;
      }
      .bottom {
        width: 100%;
        height: 49%;
      }
    }
  }
}
</style>